﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.DepartmentUsers.IndexModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "科室用户";
}
@section scripts
{
    <abp-script src="/Pages/DepartmentUsers/Index.cshtml.js"></abp-script>
}
<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span>{{department?department.name:''}}</span>
            </div>
        </div>
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="showCreate" icon="el-icon-plus" size="mini" v-if="createDepartUserPermission">新建</el-button>
                    <el-button v-on:click="showAdd" icon="el-icon-user-solid" size="mini" v-if="departmentUserAddPermission">选择用户</el-button>
                    <el-button v-on:click=" removeUser" icon="el-icon-user-solid" size="mini" v-if="departmentUserRemovePermission" :disabled="!depSelectedUsers || depSelectedUsers.length===0">移除用户</el-button>
                    <el-input v-model.trim="filterName" placeholder="用户名" size="mini" style="width:300px;margin-left:10px" clearable></el-input>
                    <el-button type="primary" v-on:click="depSearch" icon="el-icon-search" size="mini">搜索</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="loadTableData" icon="el-icon-refresh" size="mini"></el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="nav-container" v-if="multiDepartmentPermission">
                <el-tree :data="treeData" :props="defaultProps" node-key="id" default-expand-all :highlight-current="true" :expand-on-click-node="false" v-on:node-click="nodeClicked">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <a>
                            <cite>{{ node.label }}</cite>
                        </a>
                    </span>
                </el-tree>
            </div>
            <div class="table-container" >
                <el-table :data="tableData" height="500" size="mini"  class="el-table" ref="depUserTable" v-show="tableShow" v-on:selection-change="depUserSelectionChange">
                    <el-table-column type="selection" width="80">
                    </el-table-column>
                    <el-table-column type="index"  label="编号">

                    </el-table-column>
                    <el-table-column label="用户名" property="userName">

                    </el-table-column>
                    <el-table-column label="姓名" property="name">

                    </el-table-column>
                    <el-table-column label="电话"  property="phoneNumber">

                    </el-table-column>
                    <el-table-column label="编码"  property="outerCode">

                    </el-table-column>
                    <el-table-column label="工号"  property="jobNumber">

                    </el-table-column>
                    <el-table-column label="活动"  property="type">
                        <template slot-scope="scope">
                            <el-checkbox :checked="scope.row.isActive" disabled></el-checkbox>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-show="tableShow"
                               v-on:size-change="depPageSizeChange"
                               v-on:current-change="depCurrentPageChange"
                               :current-page="depCurrentPage"
                               :page-sizes="[10, 15, 20, 30,40,50,100]"
                               :page-size="depPageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="depUserTotal">
                </el-pagination>
                <div v-show="!tableShow" class="no-department">
                    <span>系统中还没配置任何科室！！</span>
                </div>
            </div>
        </div>

        <!-- 创建新用户-->
        <el-dialog title="新建用户" :visible.sync="createDialogVisible" width="600px" v-on:close="resetCreateForm" :close-on-click-modal="false">
            <el-form :model="user" :label-width="formLabelWidth" ref="creatUserForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" property="name">
                            <el-form-item label="用户名" prop="userName">
                                <el-input v-model.trim="user.userName" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" property="name">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model.trim="user.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model.trim="user.email" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="手机号">
                                <el-input v-model.trim="user.phoneNumber" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="编码" >
                                <el-input v-model.trim="user.outerCode" v-on:change="onOuterCodeChange" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="身份证号" prop="idCardNumber">
                                <el-input v-model.trim="user.idCardNumber" type="number" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="工号">
                                <el-input v-model.trim="user.jobNumber" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="submitCreate" size="mini">保存</el-button>
                <el-button v-on:click="resetCreateForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>

        <!--添加现有用户-->
        <el-dialog title="选择用户" :visible.sync="addCurrentDialogVisible" width="800px" :close-on-click-modal="false" v-on:close="closeAddDialog">
            <el-row style="margin-bottom:10px;">
                <el-col :span="23">
                    <div class="grid-content bg-purple-dark" >
                        <el-input v-model.trim="filterSystemUserName" placeholder="用户名" size="mini" style="width:300px;" clearable></el-input>
                        <el-button type="primary" v-on:click="systemSearch" icon="el-icon-search" size="mini">搜索</el-button>
                    </div>
                </el-col>
                <el-col :span="1"> 
                    <div class="grid-content bg-purple-dark">
                        <el-button v-on:click="loadSystemUsers" icon="el-icon-refresh" size="mini"></el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="systemUsers" heght="500" class="el-table" ref="systemUserTable" style="width:100%" v-show="tableShow" v-on:selection-change="systemSelectedChange">
                <el-table-column type="selection"
                                 width="55">
                </el-table-column>
                <el-table-column type="index"  label="编号">

                </el-table-column>
                <el-table-column label="用户名" property="userName">

                </el-table-column>
                <el-table-column label="姓名" property="name">

                </el-table-column>
                <el-table-column label="编码"  property="outerCode">

                </el-table-column>
                <el-table-column label="活动" property="type">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isActive"  disabled></el-checkbox>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-show="tableShow"
                           v-on:size-change="stytemPageSizeChange"
                           v-on:current-change="depCurrentPageChange"
                           :current-page="stytemCurrentPageChange"
                           :page-sizes="[10, 15, 20, 30,40,50,100]"
                           :page-size="systemPageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="systemUserTotal"  
                           style="margin-top:20px;">
            </el-pagination>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="addUserToDepartment" size="mini">添加</el-button>
                <el-button v-on:click="closeAddDialog" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>
